@extends('layouts.header')
@section('title','续费')
@section('content')
    <div class="renewalFeeConteiner">
        <!-- 设备到期时间 -->
        <div class="machineInfo">
            <p>设备号：{{$group->device->getNumber()}}</p>
            <p>到期时间：{{ $group->expired_at }}</p>
        </div>
        <!-- 续费操作 -->
        <div class="renewalFeeArea">
            <div class="selectPackageArea" id="selectPackageArea">
                <div class="selectPackageTitle">选择套餐</div>
                <div class="selectBtn">
                    @foreach($packages as $package)
                        <button onclick="selectPack(this)" package-id="{{$package->id}}"
                                data-money="{{$package->money}}">{{$package->money}}元/{{$package->time}}天
                        </button>
                    @endforeach
                </div>
            </div>
            <div class="prompt">续费须知：续费相应套餐后，使用权限是在“到期时间”累加您续费套餐的对应天数。</div>
            <div class="xufei">
                <button id="submit">立即续费</button>
            </div>
        </div>
    </div>
    <form id="form" action="{{route('device.renewal',['id'=>$group->id])}}" method="post">
        {{ csrf_field() }}
        <input id="package_id" type="hidden" name="package_id">
        <input id="chest_id" type="hidden" name="chest_id" value="{{ $chestId }}">
    </form>
@endsection
@push('js')
    <script>
        function selectPack(that) {
            $(that).addClass("active").siblings().removeClass("active");
            var packageId = $(that).attr("package-id");
            $('#package_id').val(packageId);

        }

        $("#submit").click(function () {
            var num = $('#package_id').val();
            if (num == null || num == undefined || num == '') {
                mui.alert("请选择套餐", "提示", "确认");
                return false;
            }
            $('#form').submit();
            return false;

        });
    </script>
@endpush
